<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title> 盒子模型：外边距</title>
		<style>
			*{
				margin:0;
				padding:0;
				
			}
			.box1{
				width:200px;
				height:300px;
				border:1px solid red;
				/*margin-top:100px;
				margin-right:100px;
				margin-left:100px;*/
				/*复合写法*/
				/*margin:10px 20px 30px;*/
				margin:100px; auto 80px;
				/*margin:auto;*/  /*auto:自动的*/
			}
			.box2{
				width:200px;
				height:300px;
				border:1px solid blue;
				margin:100px auto 0;
				/*外边距合并：相邻两个盒子之间使用最大的外边距
				/*相邻两个盒子之间的外边距合并问题：
				两个盒子同时设置了外边距，相同边只取外边距的最大值
				tips:一般来说只设置一个盒子的外边距*/
			}
			 .wbox{
				 width:200px;
				 height:200px;
				 background-color: skyblue;
				 margin-top:50px;
				 /*border:1px solid red;*/
				 /*padding-top:50px;*/
				 overflow: hidden;
				 /*外边距塌陷问题：
				 */
			 }
			 /*外边距的使用场景
			 1.盒子水平居中 margin:auto; 盒子必须有宽度
			 2.初始化标签的内外边距：*{
				 margin:0;
				 padding:0;
			 }
			 外边距所带来的问题：
			 1，相邻块级盒子外边距合并的问题
			 2，嵌套块级盒子外边距塌陷的问题>三个解决方法
			 方法1：给父盒子添加边框
			 方法2：给父盒子添加内边框>会撑大盒子把盒子外边距值为零
			 方法3：给父盒子添加 overflow:hidden; 超出部分隐藏 ：解决外边距塌陷问题 开发中常用的解决方法*/
			 
			 .Nbox{
				 width:100px;
				 height:100px;
				 background-color: hotpink;
				 margin-top: 50px;
				 
			 }
		</style>
	</head>
	<body>
		<!--<div class="box1">hello box1</div>
		<div class="box2">hello box21</div-->
		<!--盒子嵌套-->
	<div class=" wbox">
	<div class="Nbox">
		
	</div>
	</div>
		<!--盒子模型：内容content,内边距Padding;边框border;外边距margin-->
	</body>
</html>
